<!-- 电影列表 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <div>
            <dxtable :headBtn="headBtn" :formJson="formJson" :dataJson="dataJson" :portUrl="portUrl" :qx="qx"
                ref="databale"></dxtable>
        </div>
        <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>浏览视频</div>
            </template>
            <div>
                <videoplay :url="videourl"></videoplay>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="showModal = false"> 关闭 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { rowDark } from "naive-ui/es/legacy-grid/styles";
import dxtable from "../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { dxget, dxpost, qurl, hf } from "../../util/index";
import { h, ref, reactive } from "vue";
import videoplay from "./videoplay.vue"
const props = defineProps({
    pup: { type: String },
});
const showModal = ref(false)

let headBtn = [];
const zdList = ref()
const databale = ref();
const videourl = ref()
const typeli = ref([])
const initeer = () => {
    databale.value.initDataExpose();
};
const emit = defineEmits(["callBack"]);
// 弹窗公用该列表
let dataJson = reactive([
    {
        title: "封面",
        key: "cover",
        width: 100,
        render(row) {
            return h("img", { src: row.cover, class: "usjjkertwre" })
        }
    },
    {
        title: "电影名称",
        key: "title",
        search: true, // 是否在搜索栏展示
    },
    {
        title: "电影类别",
        key: "type",
        type:"select",
        search: true, // 是否在搜索栏展示
        width: 120,
        options: [],
        render(row) {
            try {
                return typeli.value.filter(a => a.value == row.type)[0].label
            } catch (e) {
                return "--"
            }
        }
    },
    {
        title: "简介",
        key: "introduction",
    },
    {
        title: "视频",
        key: "url",
        width: 100,
        render(row) {
            return h("span", {
                "class": 'ls sz', onClick: () => {
                    showModal.value = true
                    videourl.value = row.url
                }
            }, "点击浏览")
        },
    },
    {
        title: "排序",
        width: 100,
        render(row) {
            row.databaseName = "videoList";
            return h(sort, {
                row,
                onCallBack: () => {
                    initeer();
                },
            });
        },
    },
    {
        title: "添加时间",
        key: "addTime",
        width: "140",
        type: "daterange",
    },
]);
let portUrl = "videomsg/videoList";
const qx = {
    DeletePermissionID: "videomsglistdel", //删除
    EditPermissionIdentifier: "videomsglistbj", // 编辑
    NewPermissionIdentifier: "videomsglistxz", // 新建
    ViewPermissionID: "videomsglistck", // 查看
};


let formJson = reactive([

    {
        title: "电影封面",
        key: "cover",
        type: "img",
        required: true,
    },

    {
        title: "电影名称",
        key: "title",
        type: "input",
    },
    {
        title: "电影类别",
        key: "type",
        type: "select",
        options: []
    },
    {
        title: "简介",
        key: "introduction",
        type: "textarea",
    },
    {
        title: "视频",
        key: "url",
        type: "video",
    },
])
const getcasetype = async () => {
    const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'videofl' })
    formJson[2].options = data
    dataJson[2].options = [
        {
            label: "全部",
            value: ""
        },
        ...data
    ]
    typeli.value = data
    // ishjwoer.value = true
}
getcasetype()

</script>
  
  
  